<template>
  <div class="video-search-container">
    <!-- 排序选项 -->
    <div class="filter-section">
      <div class="sort-options">
        <div
          v-for="option in sortOptions"
          :key="option.value"
          :class="['btn-filter', { active: currentSort === option.value }]"
          @click="changeSort(option.value)"
        >
          <span class="sort-icon">{{ option.icon }}</span>
          {{ option.label }}
        </div>
      </div>
    </div>

    <!-- 搜索结果 -->
    <div class="search-results">
      <div class="result-count" v-if="totalCount">
        共找到
        <span class="highlight-count">{{ totalCount }}</span>
        个相关视频
        <span class="kawaii-emoji">ヾ(≧▽≦*)o</span>
      </div>

      <!-- 使用VideoList组件 -->
      <VideoList
        v-if="!loading || videos.length > 0"
        :videos="videos"
        :loading="loading"
        :noMore="noMore"
        @loadMore="fetchVideos"
        :highlightKeyword="searchKeyword"
      />

      <!-- 空结果提示 -->
      <div class="empty-result" v-if="!loading && videos.length === 0">
        <div class="empty-mascot"></div>
        <p class="empty-text">没有找到相关视频</p>
        <p class="empty-suggestion">换个关键词试试吧~</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import VideoList from '../videoList/VideoList.vue'

// 视频接口定义
interface Video {
  id: number | string
  title: string
  thumbnail: string
  duration: number
  viewCount: number
  danmuCount: number
  author: string
  authorAvatar?: string
  createTime: string
  tags?: string[]
}

const route = useRoute()
const router = useRouter()

// 搜索数据
const videos = ref<Video[]>([])
const currentPage = ref(1)
const loading = ref(false)
const noMore = ref(false)
const totalCount = ref(0)

// 排序选项
const sortOptions = [
  { label: '综合排序', value: 'comprehensive', icon: '✨' },
  { label: '最多播放', value: 'views', icon: '👁️' },
  { label: '最新发布', value: 'newest', icon: '🆕' },
  { label: '最多弹幕', value: 'danmaku', icon: '💬' },
  { label: '最多收藏', value: 'favorites', icon: '❤️' },
]

// 当前排序方式
const currentSort = ref('comprehensive')

// 搜索关键词
const searchKeyword = computed(() => {
  const keyword = route.query.keyword as string
  return keyword || ''
})

// 二次元相关标题
const animeTitles = [
  '《进击的巨人》最终季原声带完整收录，震撼人心的配乐集',
  '《鬼灭之刃》刀匠村篇最新情报，炭治郎将锻造新武器',
  '《间谍过家家》第二季最新剧情解析，安妮亚的超能力揭秘',
  '《咒术回战》五条悟的领域展开技术详解与角色分析',
  '《链锯人》动画化决定，最新PV公开让粉丝沸腾',
  '2024年春季新番导视，不容错过的十大热门动画',
  '《海贼王》漫画最新剧情：路飞的新形态与最终之岛的秘密',
  '宫崎骏电影《千与千寻》隐藏细节与创作背景深度解析',
  '《约定的梦幻岛》第二季制作幕后故事，原作者参与剧本创作',
  '《86-不存在的战区-》续作决定，最新视觉图公开',
  '《铃芽之旅》新海诚导演访谈：创作灵感与动画技术突破',
  '《SPY×FAMILY》最新角色设计图公开，新角色即将登场',
  '《冰海战记》第二季前瞻，维京传奇的史诗续篇',
  '《EVA新剧场版》终章解析，庵野秀明的告别与新起点',
  '《鲁路修》15周年纪念活动公开，全新动画企划启动',
  '《赛博朋克：边缘行者》动画音乐全解析，如何打造未来都市氛围',
  '《来自深渊》电影最新预告，原创剧情引发热议',
  '《刀剑神域》最新篇章情报解禁，桐人将在虚拟世界再次冒险',
  '《辉夜大小姐》最终季制作决定，石上会告白成功吗',
  '《overlord》第五季制作确认，安兹乌尔恭将征服新大陆',
  '《钢之炼金术师》20周年纪念活动，粉丝最怀念的经典场景盘点',
  '《文豪野犬》最新剧情：太宰治的过去与组织的黑暗秘密',
  '《魔法少女小圆》新作企划公开，虚渊玄再执笔',
  '《紫罗兰永恒花园》外传小说动画化，新角色声优阵容公开',
  '《进击的巨人》作者谏山创新作前瞻，离开巨人世界后的新尝试',
  '《龙珠超》漫画最新话：悟空与贝吉塔的新形态展示',
  '《JOJO的奇妙冒险》第九部前瞻，荒木飞吕彦的新世界',
  '《鬼灭之刃》柱训练篇动画化决定，制作阵容公开',
  '《物语系列》新作动画确认，西尾维新的奇妙世界再次展开',
  '《排球少年》最终话解析，日本高中排球的青春传奇',
]

// 二次元相关UP主
const animeUploaders = [
  '动漫研究社',
  '新番时间表',
  '翻译君字幕组',
  '动画笔记',
  '二次元领域',
  '漫评家小佐',
  '声优情报站',
  '动漫原画师',
  '日本文化研究所',
  '萌系画师协会',
  '动画音乐鉴赏',
  '京都动画粉丝会',
  'EVA研究委员会',
  '宫崎骏作品赏析',
  '物语系列研究会',
  '巨人考察团',
  '动漫周边测评',
  'MAD大师工作室',
  '二次元音乐电台',
  '漫改文化研究',
]

// 二次元相关标签
const animeTags = [
  '动画',
  '漫画',
  '轻小说',
  'COSPLAY',
  '声优',
  '日漫',
  '国漫',
  '动画音乐',
  '角色歌',
  '同人创作',
  'AMV',
  'MAD',
  '热门新番',
  '经典动画',
  '动画电影',
  '催泪',
  '治愈',
  '热血',
  '机战',
  '奇幻',
  '冒险',
  '青春',
  '恋爱',
  '悬疑',
  '校园',
  '日常',
  '魔法少女',
  '异世界',
  '京阿尼',
  'trigger',
  '霸权',
  '萌豚',
  '热门角色',
  '圣地巡礼',
  '手办',
  '模型',
  '画师',
  '声优',
]

// 获取视频数据
const fetchVideos = async () => {
  if (loading.value || noMore.value) return

  loading.value = true
  try {
    // 开发阶段使用模拟数据
    await loadMockData()
  } catch (error) {
    console.error('获取搜索结果失败:', error)
  } finally {
    loading.value = false
  }
}

// 模拟数据加载
const loadMockData = () => {
  // 设置总数 - 确保总是有数据
  if (currentPage.value === 1) {
    totalCount.value = 67
  }

  // 加载二次元banner图片资源
  const bannerImages = [
    '/src/assets/anime/images/banner1.png',
    '/src/assets/anime/images/banner2.png',
    '/src/assets/anime/images/banner3.png',
    '/src/assets/anime/images/banner4.png',
    '/src/assets/anime/images/banner5.png',
    '/src/assets/anime/images/banner6.png',
    '/src/assets/anime/images/banner7.png',
    '/src/assets/anime/images/banner8.png',
    '/src/assets/anime/images/banner9.png',
    '/src/assets/anime/images/banner10.png',
    '/src/assets/anime/images/banner11.png',
    '/src/assets/anime/images/banner12.png',
    '/src/assets/anime/images/banner13.png',
    '/src/assets/anime/images/banner14.png',
    '/src/assets/anime/images/banner15.png',
    '/src/assets/anime/images/banner16.png',
  ]

  // 根据排序方式创建不同的模拟数据
  const mockVideos: Video[] = Array(currentPage.value < 4 ? 20 : 7)
    .fill(0)
    .map((_, index) => {
      // 确保生成正数的随机数
      let viewCount = Math.floor(Math.random() * 1000000) + 1000
      let danmuCount = Math.floor(Math.random() * 50000) + 100
      let creationDate = new Date()
      creationDate.setDate(
        creationDate.getDate() - Math.floor(Math.random() * 365),
      )

      // 根据排序方式调整数据顺序
      switch (currentSort.value) {
        case 'views':
          // 按播放量排序，让前面的数据播放量更高
          viewCount = 1000000 - (currentPage.value - 1) * 50000 - index * 2000
          break
        case 'newest':
          // 按最新发布排序，让前面的数据更新
          creationDate = new Date()
          creationDate.setDate(
            creationDate.getDate() - (currentPage.value - 1) * 20 - index,
          )
          break
        case 'danmaku':
          // 按弹幕数排序，让前面的数据弹幕更多
          danmuCount = 50000 - (currentPage.value - 1) * 5000 - index * 1000
          break
        case 'favorites':
          // 按收藏数排序，暂时不展示实际收藏数，只用于排序
          break
        case 'comprehensive':
        default:
          // 综合排序，保持随机性但确保数据合理
          if (index < 5) {
            // 前几个结果更高质量
            viewCount = Math.floor(Math.random() * 500000) + 500000
            danmuCount = Math.floor(Math.random() * 20000) + 20000
          }
          break
      }

      // 随机选择标题和UP主
      const titleIndex = Math.floor(Math.random() * animeTitles.length)
      const uploaderIndex = Math.floor(Math.random() * animeUploaders.length)

      // 随机选择1-3个标签
      const tagCount = Math.floor(Math.random() * 3) + 1
      const tags: string[] = []
      for (let i = 0; i < tagCount; i++) {
        const tagIndex = Math.floor(Math.random() * animeTags.length)
        if (!tags.includes(animeTags[tagIndex])) {
          tags.push(animeTags[tagIndex])
        }
      }

      // 随机选择封面图
      const bannerIndex = Math.floor(Math.random() * bannerImages.length)

      // 创建视频数据
      const title = generateTitle(titleIndex, currentPage.value, index)
      const id = (currentPage.value - 1) * 100 + index + 1
      return {
        id,
        title,
        thumbnail: bannerImages[bannerIndex],
        duration: Math.floor(Math.random() * 3600) + 60, // 随机时长，至少1分钟
        viewCount,
        danmuCount,
        author: animeUploaders[uploaderIndex],
        createTime: formatDate(creationDate),
        tags: tags,
      }
    })

  videos.value = [...videos.value, ...mockVideos]
  currentPage.value++

  // 第4页后模拟没有更多数据
  if (currentPage.value > 4) {
    noMore.value = true
  }

  // 模拟API调用延迟
  return new Promise((resolve) => setTimeout(resolve, 500))
}

// 生成带有关键词的标题
const generateTitle = (
  titleIndex: number,
  page: number,
  index: number,
): string => {
  const keyword = searchKeyword.value.trim()
  const baseTitle = animeTitles[titleIndex]

  // 如果没有关键词，返回原标题
  if (!keyword) {
    return baseTitle
  }

  // 综合排序时，前面的结果更可能完全匹配关键词
  if (currentSort.value === 'comprehensive') {
    // 前10个结果有很高概率完全包含关键词
    if (page === 1 && index < 10) {
      // 在标题中插入关键词
      const insertPos = Math.floor(baseTitle.length / 2)
      return (
        baseTitle.slice(0, insertPos) +
        `【${keyword}】` +
        baseTitle.slice(insertPos)
      )
    }
  }

  // 其他排序方式或不匹配的情况，有50%的概率在标题前面加上关键词
  if (Math.random() > 0.5) {
    return `【${keyword}】${baseTitle}`
  }

  return baseTitle
}

// 格式化日期
const formatDate = (date: Date): string => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 格式化数字
const formatCount = (count: number): string => {
  if (count >= 10000) {
    return (count / 10000).toFixed(1) + '万'
  }
  return count.toString()
}

// 格式化时长
const formatDuration = (seconds: number): string => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60

  if (hours > 0) {
    return `${hours}:${String(minutes).padStart(2, '0')}:${String(
      secs,
    ).padStart(2, '0')}`
  } else {
    return `${minutes}:${String(secs).padStart(2, '0')}`
  }
}

// 切换排序方式
const changeSort = (sortType: string) => {
  if (currentSort.value === sortType) return

  currentSort.value = sortType

  // 重置数据
  videos.value = []
  currentPage.value = 1
  noMore.value = false

  // 重新获取数据
  fetchVideos()
}

// 跳转到视频详情页
const jumpToVideoDetail = (video: Video) => {
  router.push({
    path: `/front/video/${video.id}`,
    query: {
      from: 'search',
      keyword: searchKeyword.value,
    },
  })
}

// 监听搜索关键词变化
watch(
  () => route.query.keyword,
  (newKeyword) => {
    // 重置数据
    videos.value = []
    currentPage.value = 1
    noMore.value = false
    totalCount.value = 0

    // 重新获取数据
    fetchVideos()
  },
  { immediate: true }, // 确保首次加载时也执行
)

// 初始加载
onMounted(() => {
  if (videos.value.length === 0) {
    fetchVideos()
  }
})
</script>

<style lang="scss" scoped>
.video-search-container {
  padding: 0 10px;
}

.filter-section {
  margin-bottom: 20px;
  width: 100%;
  overflow-x: auto;

  &::-webkit-scrollbar {
    height: 4px;
  }

  &::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #ffb6c1;
    border-radius: 2px;
  }
}

.sort-options {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0 10px;

  .btn-filter {
    white-space: nowrap;
    padding: 6px 14px;
    margin-right: 12px;
    border-radius: 16px;
    font-size: 14px;
    color: #7c5479;
    background-color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #ffcbe3;
    display: flex;
    align-items: center;

    .sort-icon {
      margin-right: 4px;
      font-size: 14px;
    }

    &:hover {
      background-color: #ffcbe3;
      transform: translateY(-2px);
    }

    &.active {
      background: linear-gradient(to right, #fe4ea4, #ff9fcf);
      color: #fff;
      box-shadow: 0 2px 8px rgba(254, 78, 164, 0.3);
      border-color: transparent;
    }
  }
}

.search-results {
  position: relative;
}

.result-count {
  font-size: 15px;
  color: #7c5479;
  margin-bottom: 20px;

  .highlight-count {
    color: #fe4ea4;
    font-weight: bold;
    font-size: 18px;
    margin: 0 3px;
  }

  .kawaii-emoji {
    margin-left: 5px;
    color: #fe4ea4;
  }
}

.empty-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;

  .empty-mascot {
    width: 150px;
    height: 150px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="80" fill="%23ffcbe3"/><circle cx="70" cy="80" r="10" fill="%23fff"/><circle cx="130" cy="80" r="10" fill="%23fff"/><path d="M70,120 Q100,140 130,120" stroke="%23fe4ea4" stroke-width="4" fill="none"/></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
  }

  .empty-text {
    font-size: 18px;
    color: #7c5479;
    margin-bottom: 10px;
    font-weight: bold;
  }

  .empty-suggestion {
    font-size: 14px;
    color: #c9a0dc;
  }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
  color: #fe4ea4;

  .loading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #ffcbe3;
    border-top-color: #fe4ea4;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 10px;
  }
}

.no-more {
  text-align: center;
  color: #c9a0dc;
  padding: 20px 0;
  position: relative;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 80px;
    height: 1px;
    background: linear-gradient(to right, transparent, #ffcbe3);
  }

  &::before {
    left: calc(50% - 120px);
  }

  &::after {
    right: calc(50% - 120px);
    transform: rotate(180deg);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}
</style>
